import 'package:flutter/material.dart';
import 'package:potato_music_app/pages/tabbar/discovery/music_discovery_page.dart';
import 'package:potato_music_app/pages/tabbar/home/music_home_page.dart';
import 'package:potato_music_app/pages/tabbar/user/music_user_index.dart';
import 'package:common_utils/common_utils.dart';

class MusicTabbarPage extends StatefulWidget {
  @override
  _MusicTabbarPageState createState() => _MusicTabbarPageState();
}

class _MusicTabbarPageState extends State<MusicTabbarPage> {
  
  int _selectedIndex;

  List<Map> tabs = [
    {
      'icon': 'assets/images/tabbar/icon-home.png', 
      'icon-select': 'assets/images/tabbar/icon-home-select.png', 
      'text': '音乐',
      'widget': MusicHomePage(),
    },
    {
      'icon': 'assets/images/tabbar/icon-discovery.png', 
      'icon-select': 'assets/images/tabbar/icon-discovery-select.png', 
      'text': '发现',
      'widget': MusicDiscoveryPage(),
    },
    {
      'icon': 'assets/images/tabbar/icon-user.png', 
      'icon-select': 'assets/images/tabbar/icon-user-select.png', 
      'text': '我的',
      'widget': MusicUserIndexPage()
    }
  ];

  @override
  void initState() {
    _selectedIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: tabs[_selectedIndex]['widget'],
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12.0,
        items: getTabItems(),
        // <BottomNavigationBarItem>[
        //   BottomNavigationBarItem(icon: Icon(Icons.music_note), title: Text('音乐')),
        //   BottomNavigationBarItem(icon: Icon(Icons.find_in_page), title: Text('发现')),
        //   BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
        // ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      )
    );
  }

  List <BottomNavigationBarItem> getTabItems() {
    List<BottomNavigationBarItem> tabItems = 
      tabs.map((item) => 
        BottomNavigationBarItem(
          icon: Image.asset(item['icon'], width: 20.0, height: 20.0),
          activeIcon: Image.asset(item['icon-select'], width: 20.0, height: 20.0),
          title: Text(
            item['text'],
            style: TextStyle(
              fontSize: 12.0
            )
          )
        )
      ).toList();
    return tabItems;
  }

  void _onItemTapped(int _index) {
    setState(() {
      _selectedIndex = _index;
    });
  }
}